<template>
  <div>



    <el-container>
      <el-header>
        <h1>我的日报</h1>
      </el-header>
      <el-main>
        <div class="calendarTable" >
          <el-calendar >
            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
            <template v-slot:dateCell="{date, data}" >
              <!-- old 2.5 :<template slot="dateCell"  v-slot:dateCell="{date, data}" slot-scope="{date, data}">-->
              <span>
                <p style="text-align: center" >
               {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}

                  <br/>

                  <span v-for="(item,index) in response " :key="index">
                      <!--          日期对应上            -->
                        <span v-if="item.created_at==data.day" >
                            <label style="display: none;">{{vForFlag=1}}</label>
                          <!--           根据当前日期的日报状态显示内容             -->
                          <!--           日报状态为11               -->
                          <span v-if="item.approval_status==11">
                            <br/>
                            <el-button  type="success" plain >已审核</el-button>
                          </span>
                          <!--           日报状态为12              -->
                          <span v-else-if="item.approval_status==12">
                            <br/>
                            <el-button  type="warning" plain v-on:click="writeDaily(data.day)">已填报</el-button>
                          </span>
                          <!--           日报状态为13               -->
                          <span v-else-if="item.approval_status==13">
                            <br/>
                            <el-button type="danger" plain v-on:click="writeDaily(data.day)">已驳回</el-button>
                          </span>
                        </span>
                  </span >
                  <!--       日期对应不上显示一个填报按钮           -->
                  <span v-if="vForFlag==0&&getData()<data.day">
                    <br/>
                      未开始
                  </span>
                  <span v-else-if="vForFlag==0">
                    <br/>
                    <el-button type="primary" icon="el-icon-edit" v-on:click="writeDaily(data.day)" circle></el-button>
                  </span>
                  <label style="display: none;">{{vForFlag=0}}</label>


                </p>

              </span>

            </template>
          </el-calendar>
        </div>
      </el-main>
      <el-footer>

      </el-footer>
    </el-container>


  </div>

</template>

<script>
import {listUser} from "@/api/system/user";
import {dailyStatus, dailyStatusById, getuserinfo} from "@/api/system/daily";
import axios from "axios";

export default {
  name: "Mydaily",
  data() {
    return {

      getDailyInfo:{
        log_type:"1",
        staff:{
          userId:"",
        },
      },
      //日报
      lfs_log_day: {
        create_time:"",

      },
      response:"",
      userName:"",
      vForFlag:0,
    }
  },
  async created() {
    await this.getUserinfo();

  },
  methods:{
    writeDaily:function (createTime){
      this.$router.push({
        path: 'WriteDaily',
        query: {
          createTime: createTime,
        },
      });
    },
    //格式化日期
    dateFormat:function(time) {
      var date=time;
      var year=date.getFullYear();
      var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
      var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
      // 拼接
      return year+"-"+month+"-"+day;
    },
    //获取日期
    getData:function (){
      let now=new Date();
      return this.dateFormat(now);
    },
    //获取日报状态
    getDailyStatus() {
      // console.log(this.getDailyInfo.staff.userId);
      this.loading = true;
      //console.log(this.getDailyInfo);
      dailyStatusById(this.getDailyInfo).then(response => {
          //console.log("response:-----" +JSON.stringify(response));
          this.response=response.rows;
          for(let i=0;i<response.rows.length;i++){
            this.response[i].created_at=response.rows[i].created_at.slice(0,10);
          }
          this.loading = false;
          //console.log(this.response);
        }
      );
    },
    getUserinfo(){
      this.loading=true;
      getuserinfo().then(response => {
        this.getDailyInfo.staff.userId=response.user.userId;
        //console.log(this.getDailyInfo);
        this.loading = false;
        this.getDailyStatus();
      });

    },
  },
}

</script>
<style>
.is-selected {
  color: #1989FA;
}

.calendarTable  .el-calendar-table .el-calendar-day{
  height: 120px;
}
</style>
